<template>
  <view class="container">
    <view class="card" v-for="(item, index) in revenueDetails" :key="index">
      <view class="icon">
        <image :src="item.icon" mode="aspectFill" />
      </view>
      <view class="content">
        <text class="title">{{ item.title }}</text>
        <text class="description">{{ item.description }}</text>
      </view>
      <view class="amount">
        <text :class="{ highlight: item.amount > 0 }"
          >￥ {{ item.amount.toFixed(2) }}</text
        >
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import income1 from "./images/income1.png";
import income2 from "./images/income2.png";
import income3 from "./images/income3.png";
import income4 from "./images/income4.png";

const revenueDetails = ref<any[]>([
  {
    icon: income1,
    title: "订单收益",
    description: "成功订单产生的收益",
    amount: 0.0,
  },
  {
    icon: income2,
    title: "下级收益",
    description: "对下级代理的提成",
    amount: 0.0,
  },
  {
    icon: income3,
    title: "基数收益",
    description: "对商家的基数收益",
    amount: 0.0,
  },
  {
    icon: income4,
    title: "补贴收益",
    description: "总部对代理商的补贴收益",
    amount: 0.0,
  },
]);
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  /* background-color: #e0f7fa; */
}

.card {
  display: flex;
  align-items: center;
  border-radius: 24rpx;
  padding: 48rpx 24rpx;
  margin-bottom: 24rpx;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to right, #FFF4E6, #FFFFFF);
}

.icon {
  width: 88rpx;
  height: 88rpx;
  // flex: 1;m
  margin-right: 24rpx;
  image {
    width: 88rpx;
    height: 88rpx;
  }
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.description {
  font-size: 12px;
  color: #888;
}

.amount {
  font-weight: bold;
font-size: 20px;
  color: #FF7B00;
  font-family: DIN Alternate, DIN Alternate;
}

.highlight {
  color: #FF7B00;
}
</style>
